<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>示例项目</title>
    <link rel="stylesheet" type="text/css" href="./src/styles/normalize.css" />
    <link rel="stylesheet" type="text/css" href="./src/styles/flex.css" />
    <style>
      html,
      body,
      #app {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #e1f3d0;
      }

      #svg {
        height: 80%;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <svg
        id="svg"
        viewBox="0 0 96 96"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <ellipse cx="48" cy="70.5" rx="40" ry="17.5" fill="#B6CDA0" />
        <path
          d="M14.0115 40.2816C13.0634 37.5369 12.6974 36.9752 11.3286 35.6154C26.4052 22.5649 41.9919 41.6823 42.227 50.1539C39.0651 52.612 32.1631 57.3857 25.9947 55.8652C18.2842 53.9645 14.9595 43.0262 14.0115 40.2816Z"
          fill="#649734"
        />
        <path
          opacity="0.5"
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M13.0979 34.1753C14.0106 35.1659 14.3963 35.9317 15.192 38.2353C15.2397 38.3734 15.2934 38.5323 15.3534 38.7097C16.4858 42.0581 19.8528 52.0139 27.1752 53.8189C32.5995 55.156 38.5911 51.6259 42.1078 49.0832C42.1623 49.4417 42.1946 49.7866 42.2037 50.1156C39.0418 52.5737 32.1398 57.3473 25.9714 55.8268C18.649 54.0218 15.282 44.0659 14.1497 40.7176C14.0896 40.5402 14.0359 40.3813 13.9882 40.2432C13.0401 37.4985 12.6741 36.9368 11.3054 35.577C11.9024 35.0602 12.5003 34.5939 13.0979 34.1753Z"
          fill="#47751B"
        />
        <path
          d="M21.2029 39.099C24.8205 41.0131 40.9947 54.2015 44.4868 54.5511C47.9789 54.9008 50.7448 54.049 50.7448 54.049C40.9947 54.2015 26.0219 40.2869 21.2029 39.099Z"
          fill="#72A93E"
        />
        <path
          opacity="0.6"
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M42.1192 49.0479C37.8962 49.1605 32.4391 48.5798 29.1122 45.2529C25.4442 41.5849 25.0835 35.6714 25.6657 31.6197C34.3559 33.7433 41.1815 43.1727 42.1192 49.0479Z"
          fill="#396112"
        />
        <path
          d="M28.4404 20.3363L28.4404 20.3363C48.0941 16.9671 51.5433 41.3908 47.362 48.7625C43.3844 49.2304 35.0083 49.7452 30.516 45.2529C24.9006 39.6376 27.0365 28.7593 28.4404 27.3555C29.8442 25.9516 28.9083 22.2081 28.4404 20.3363Z"
          fill="#649734"
        />
        <path
          opacity="0.5"
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M47.9638 47.4464C43.7484 47.8716 36.1291 48.0584 31.9198 43.8491C26.3045 38.2338 28.4404 27.3555 29.8442 25.9517C30.9935 24.8024 30.5747 22.0852 30.1282 20.1104C29.5794 20.1626 29.0169 20.2375 28.4404 20.3363L28.4404 20.3363C28.9083 22.2081 29.8442 25.9517 28.4404 27.3555C27.0365 28.7593 24.9006 39.6376 30.516 45.2529C35.0083 49.7452 43.3844 49.2304 47.362 48.7625C47.5846 48.3699 47.7857 47.9289 47.9638 47.4464Z"
          fill="#47751B"
        />
        <path
          d="M35.269 27.7403C37.3748 31.2499 44.394 50.9035 47.2016 53.0093C50.0093 55.115 52.817 55.817 52.817 55.817C44.394 50.9035 38.7786 31.2499 35.269 27.7403Z"
          fill="#72A93E"
        />
        <path
          opacity="0.5"
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M19.9358 51.9001C21.5597 53.7617 23.5582 55.2646 25.9945 55.8652C32.1629 57.3857 39.0649 52.612 42.2267 50.1539C42.2171 49.8055 42.1814 49.4391 42.1209 49.0576C44.1584 49.0852 46.0131 48.9212 47.3619 48.7625C50.0647 43.9975 49.5793 32.1079 43.5901 25.205C43.2429 26.1433 42.8919 27.1276 42.5297 28.1433C42.0115 29.5966 41.4703 31.1143 40.8844 32.6537C39.7169 35.7216 38.1597 37.863 36.6274 39.97L36.6274 39.9702C36.4927 40.1553 36.3582 40.3403 36.2242 40.5255C28.5083 40.793 22.6611 45.1823 19.9358 51.9001Z"
          fill="#396112"
        />
        <path
          d="M74.5767 56.379C74.5767 69.1533 65.1489 77.4366 53.5191 77.4366C41.8894 77.4366 31.8368 68.8739 32.4616 56.379C33.0864 43.8842 39.1211 41.5378 42.2883 33.2156C46.139 23.0975 47.3568 13.9221 53.5191 17.7736C59.0558 13.8186 61.2143 20.5993 65.4515 31.2498C68.7346 39.5021 74.5767 43.6048 74.5767 56.379Z"
          fill="#7EA15C"
        />
        <path
          opacity="0.6"
          d="M57.7305 20.7211C58.7629 21.7535 60.2509 24.3804 61.1893 27.0383M61.942 29.846C61.8975 29.5791 61.8424 29.306 61.7781 29.0287"
          stroke="white"
          stroke-linecap="round"
        />
        <path
          d="M37.9351 81.5789C25.2468 80.0994 18.1112 69.7757 19.4581 58.2242C20.805 46.6727 30.0043 40.1881 42.3427 42.2558C54.6811 44.3236 56.7829 48.0808 64.6822 52.1905C74.2862 57.1872 83.2589 59.4594 78.7196 65.1342C82.0067 71.0917 75.0216 72.4503 63.952 75.4255C55.3751 77.7308 50.6233 83.0583 37.9351 81.5789Z"
          fill="#7EA15C"
        />
        <path
          opacity="0.4"
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M50.7117 69.1533C62.3414 69.1533 74.5775 69.1533 74.5775 56.3791C74.5775 56.1145 74.575 55.8536 74.57 55.5963C73.2774 54.9215 71.8132 54.2335 70.2489 53.4984C68.4867 52.6704 66.5974 51.7827 64.6831 50.7868C62.3927 49.5951 60.5897 48.4332 58.8833 47.3334C54.7044 44.6403 51.1045 42.3203 42.3436 40.8521C38.4243 40.1953 34.8218 40.4014 31.6871 41.3587C30.592 42.6884 29.8229 44.719 29.654 48.0958C29.0292 60.5906 39.0818 69.1533 50.7115 69.1533H50.7117Z"
          fill="#396112"
        />
        <path
          d="M39.0056 76.5092C29.4841 75.3355 18.1266 69.6408 19.468 58.1372C20.8093 46.6336 29.3337 39.9816 41.6723 42.0467C54.011 44.1119 56.7859 48.0531 64.6867 52.1497C74.2926 57.1305 83.2658 59.3978 78.7295 65.0473C81.9648 70.7979 70.7905 71.4831 63.1228 72.2709C55.455 73.0587 48.5271 77.683 39.0056 76.5092Z"
          fill="#FCF3BC"
        />
        <path
          d="M55.119 13H53.0133C53.0133 13 51.6096 17.9134 52.3115 18.6153C53.0135 19.3173 54.4171 19.3173 55.1192 18.6153C55.8213 17.9134 55.119 13 55.119 13Z"
          fill="#5B7343"
        />
        <path
          d="M55.0422 61.0969C54.7581 66.052 43.778 69.4798 37.3322 68.2346C30.8865 66.9894 27.84 63.4339 29.0859 56.1358C30.3318 48.8376 35.762 45.7175 41.9063 47.4179C48.0506 49.1183 55.3263 56.1417 55.0422 61.0969Z"
          fill="#D48243"
        />
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M53.2001 64.3573C49.3481 66.4058 43.649 67.4149 39.6741 66.6471C33.2284 65.4019 30.1819 61.8464 31.4278 54.5483C31.9296 51.6085 33.1104 49.3466 34.7434 47.8046C31.911 49.1127 29.804 51.9307 29.0861 56.1358C27.8403 63.434 30.8867 66.9894 37.3325 68.2346C42.2312 69.181 49.7489 67.4283 53.2001 64.3573Z"
          fill="#C27031"
        />
        <path
          opacity="0.23"
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M22.2658 55.288C20.9188 66.8394 28.0545 77.1631 40.7427 78.6426C49.4518 79.6581 54.4218 77.4666 59.4561 75.2467C61.7563 74.2324 64.0699 73.2122 66.7597 72.4893C67.5092 72.2878 68.24 72.0938 68.9502 71.9052C73.4382 70.7136 77.1017 69.7409 79.4555 68.5001C78.7581 71.4918 73.5838 72.8657 66.1427 74.8414C65.4325 75.03 64.7017 75.224 63.9522 75.4255C61.2624 76.1484 58.9488 77.1686 56.6487 78.1829C51.6143 80.4028 46.6444 82.5943 37.9353 81.5788C25.247 80.0993 18.1114 69.7756 19.4583 58.2241C20.1415 52.3644 22.5745 47.7631 26.5541 44.9443C24.2535 47.627 22.7507 51.1291 22.2658 55.288Z"
          fill="#30520F"
        />
        <path
          opacity="0.6"
          d="M46.4996 52.3074C47.3496 52.7323 49.0229 54.0321 50.3356 55.2409M52.115 57.2208C52.0358 57.0624 51.8951 56.8648 51.7079 56.6403"
          stroke="white"
          stroke-linecap="round"
        />
        <path
          opacity="0.6"
          d="M33.1632 21.423C34.0227 21.423 35.4611 22.0019 36.5762 22.5797M38.0766 23.5288C38.0141 23.4662 37.922 23.3915 37.8057 23.3081"
          stroke="white"
          stroke-width="0.5"
          stroke-linecap="round"
        />
        <path
          opacity="0.6"
          d="M17.0192 33.3556C17.8534 32.9385 19.1833 32.5214 20.4199 32.3989M22.6345 32.6537C22.4423 32.5576 22.2239 32.4878 21.9863 32.4407"
          stroke="white"
          stroke-width="0.5"
          stroke-linecap="round"
        />
      </svg>
    </div>
    <script src="./src/lib/mojs_core.js"></script>
    <script src="./src/lib/mojs_player.js"></script>

    <script>
      let whiteColor = 'white'
      let path = document.querySelectorAll('path')
      let fillData = []
      let strokeColorData = []
      let strokeWidthData = []
      Array.from(path).forEach((item) => {
        let fillColor = item.getAttribute('fill')
        fillData.push({ none: fillColor || whiteColor })
        strokeWidthData.push(fillColor ? 0.5 : 1)
        strokeColorData.push(fillColor || whiteColor)
      })

      // console.log(strokeColorData)

      const HtmlStagger = mojs.stagger(mojs.Html)

      let avocado = new HtmlStagger({
        el: path,
        fill: fillData,
        stroke: strokeColorData,
        strokeWidth: strokeWidthData,
        strokeDasharray: '3000',
        strokeDashoffset: { 3000: '0' },
        duration: 8000,
        delay: 'stagger(500)',
      })
      // avocado.play()
      let player = new MojsPlayer({
        add: avocado,
        isRepeat: false,
        isPlaying: true,
        isSaveState: false,
      })
    </script>
  </body>
</html>
